<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;background-color: RGB(16,12,42)">
<b style="color: whitesmoke;font-size: 25px;position: absolute;left: 600px;top: 30px">不同风速下每小时最大使用量</b>
<div id="container" style="height: 80%;width: 80%;top:100px;left: 160px"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom,'dark');
    var app = {};
    var option;
    option = {

        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['casual', 'registered', 'cnt']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0', '0.0896', '0.1045', '0.1343', '0.1642', '0.194', '0.2239', '0.2537', '0.2836', '0.2985', '0.3284', '0.3582', '0.3881', '0.4179', '0.4478', '0.4627', '0.4925', '0.5224', '0.5522', '0.5821', '0.6119', '0.6418', '0.6567', '0.6866', '0.7164', '0.7463', '0.7761', '0.806', '0.8358', '0.8507']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'casual',
                type: 'line',
                stack: '总量',
                data: [367, 361, 362, 357, 293, 355, 350, 325, 325, 326, 325, 311, 354, 321, 288, 242, 220, 317, 195, 108, 83, 63, 102, 79, 94, 84, 0, 5, 2, 181]
            },
            {
                name: 'registered',
                type: 'line',
                stack: '总量',
                data: [876, 774, 838, 790, 806, 839, 885, 886, 860, 876, 788, 746, 774, 796, 733, 757, 782, 672, 640, 669, 283, 305, 545, 222, 186, 181, 5, 151, 14, 177]
            },
            {
                name: 'cnt',
                type: 'line',
                stack: '总量',
                data: [970, 839, 922, 891, 957, 943, 976, 977, 967, 968, 890, 856, 864, 900, 834, 833, 857, 770, 672, 755, 366, 342, 597, 301, 280, 189, 5, 152, 16, 358]
            }
        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>